<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../../component/thirdParty/metroModels/jquery.js"></script>
    <script src="../../../component/thirdParty/metroModels/metro.js"></script>
    <script src="../../../component/thirdParty/metroModels/select2.min.js"></script>
    <link rel="stylesheet" href="../../../component/css/metroModels/metro.css">
    <link rel="stylesheet" href="../../../component/css/metroModels/metro-icons.css">
    <link rel="stylesheet" href="../../../component/css/metroModels/metro-schemes.css">
    <link rel="stylesheet" href="../../../component/css/metroModels/zm.css">
</head>

<body>
    <div class="grid">
        <div class="row cells5">
            <div class="cell colspan1">
                <div class="listview-outlook" data-role="listview">
                    <div class="list-group">
                        <span class="list-group-toggle">表单</span>
                        <div class="list-group-content">
                            <div class="list">
                                <div class="list-content">
                                    <span class="list-title"></span>
                                    <span class="list-subtitle"></span>
                                    <span class="list-remark">表单样式</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--样式集合-->
            <div class="cell colspan4" style="padding-right:10px" name="form">
                <!--input框大小集合-->
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>表单样式</b></h2>
                    </div>
                </div>
                <hr class="thin">
                <!--表单样式-->
                <div class="row cells2">
                    <div class="cell">
                        <div class="cell">
                            <h2>样式1</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="input-control text full-size" data-role="input">
                                        <label for="user_login">User email:</label>
                                        <input type="text" name="user_login" id="user_login">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell">
                            <h2>样式2</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow _zm-form-horizontal">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="row cells5 inputItem">
                                        <div class="cell" data-role="hint" data-hint-background="bg-black" data-hint-color="fg-white" data-hint-mode="3" data-hint="User Email" data-hint-position="left">
                                            User Email:
                                        </div>
                                        <div class="cell colspan4">
                                            <div class="input-control text full-size" data-role="input">
                                                <input type="text" name="user_password" id="user_password">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row cells5 inputItem" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="3" data-hint="Password" data-hint-position="left">
                                        <div class="cell">
                                            Password:
                                        </div>
                                        <div class="cell colspan4">
                                            <div class="input-control text full-size" data-role="input">
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row cells2">
                    <div class="cell">
                        <div class="cell">
                            <h2>样式3</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow">
                                <form>
                                    <h1 class="text-light">Edit</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="input-control text full-size" data-role="input">
                                        <label for="user_login">User email:</label>
                                        <input type="text" name="user_login" id="user_login">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control text full-size" data-role="datepicker" data-scheme="darcula" data-format="yyyy-mm-dd">
                                        <label>choose date:</label>
                                        <input type="text">
                                        <button class="button"><span class="mif-calendar"></span></button>
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control full-size" data-role="select">
                                        <label>multi select with search input</label>
                                        <select>
                                            <option>option1</option>
                                            <option>option2</option>
                                        </select>
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control full-size" data-role="select" data-multiple="true">
                                        <label>multi select</label>
                                        <select>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                        </select>
                                    </div>
                                    <br/>
                                    <br/>
                                    <div class="input-control select full-size">
                                        <label>select</label>
                                        <select>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                        </select>
                                    </div>
                                    <br />
                                    <!-- Small radio button -->
                                    <label class="input-control radio small-check">
                                        <input type="radio" name="sex">
                                        <span class="check"></span>
                                        <span class="caption">male</span>
                                    </label>
                                    <label class="input-control radio small-check">
                                        <input type="radio" name="sex">
                                        <span class="check"></span>
                                        <span class="caption">female</span>
                                    </label>
                                    <br>
                                    <!-- Small Checkbox -->
                                    <label class="input-control checkbox small-check">
                                        <input type="checkbox" checked>
                                        <span class="check"></span>
                                        <span class="caption"><a class="_zm-clause" href="#">i agree something clause</a></span>
                                    </label>
                                    <br>
                                    <br>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell">
                            <h2>样式4</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow _zm-form-horizontal">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="input-control modern text iconic full-size">
                                        <input type="text">
                                        <span class="label">You login</span>
                                        <span class="informer">Please enter you login or email</span>
                                        <span class="placeholder">Input login</span>
                                        <span class="icon mif-user"></span>
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control modern password iconic full-size" data-role="input">
                                        <input type="password">
                                        <span class="label">You password</span>
                                        <span class="informer">Please enter you password</span>
                                        <span class="placeholder">Input password</span>
                                        <span class="icon mif-lock"></span>
                                    </div>
                                    <br>
                                    <br>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <div class="cell">
                            <h2>样式5</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow _zm-form-horizontal">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="row cells2">
                                        <div class="cell">
                                            <div class="row cells5 inputItem">
                                                <div class="cell" title="User Email">
                                                    User Email:
                                                </div>
                                                <div class="cell colspan4">
                                                    <div class="input-control text full-size" data-role="input">
                                                        <input type="text" name="user_password" id="user_password">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row cells5 inputItem" title="Password:">
                                                <div class="cell">
                                                    Password:
                                                </div>
                                                <div class="cell colspan4">
                                                    <div class="input-control text full-size" data-role="input">
                                                        <input type="password" name="user_password" id="user_password">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cell">
                                            <div class="row cells5 inputItem">
                                                <div class="cell" title="User Email">
                                                    User Email:
                                                </div>
                                                <div class="cell colspan4">
                                                    <div class="input-control text full-size" data-role="input">
                                                        <input type="text" name="user_password" id="user_password">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row cells5 inputItem" title="Password:">
                                                <div class="cell">
                                                    Password:
                                                </div>
                                                <div class="cell colspan4">
                                                    <div class="input-control text full-size" data-role="input">
                                                        <input type="password" name="user_password" id="user_password">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <div class="cell">
                            <h2>样式6</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow _zm-form-horizontal">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="row cells2">
                                        <div class="cell">
                                            <div class="input-control text full-size" data-role="input">
                                                <label for="user_login">User email:</label>
                                                <input type="text" name="user_login" id="user_login">
                                            </div>
                                            <br />
                                            <br />
                                            <div class="input-control password full-size" data-role="input">
                                                <label for="user_password">User password:</label>
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                            <br />
                                            <br />
                                        </div>
                                        <div class="cell">
                                            <div class="input-control text full-size" data-role="input">
                                                <label for="user_login">User email:</label>
                                                <input type="text" name="user_login" id="user_login">
                                            </div>
                                            <br />
                                            <br />
                                            <div class="input-control password full-size" data-role="input">
                                                <label for="user_password">User password:</label>
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                            <br />
                                            <br />
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <div class="cell">
                            <h2>样式7</h2>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow _zm-form-horizontal">
                                <form>
                                    <h1 class="text-light">Login to service</h1>
                                    <hr class="thin" />
                                    <br />
                                    <div class="row cells3">
                                        <div class="cell">
                                            <div class="input-control text full-size" data-role="input">
                                                <label for="user_login">User email:</label>
                                                <input type="text" name="user_login" id="user_login">
                                            </div>
                                            <br />
                                            <br />
                                            <div class="input-control password full-size" data-role="input">
                                                <label for="user_password">User password:</label>
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                            <br />
                                            <br />
                                        </div>
                                        <div class="cell">
                                            <div class="input-control text full-size" data-role="input">
                                                <label for="user_login">User email:</label>
                                                <input type="text" name="user_login" id="user_login">
                                            </div>
                                            <br />
                                            <br />
                                            <div class="input-control password full-size" data-role="input">
                                                <label for="user_password">User password:</label>
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                            <br />
                                            <br />
                                        </div>
                                        <div class="cell">
                                            <div class="input-control text full-size" data-role="input">
                                                <label for="user_login">User email:</label>
                                                <input type="text" name="user_login" id="user_login">
                                            </div>
                                            <br />
                                            <br />
                                            <div class="input-control password full-size" data-role="input">
                                                <label for="user_password">User password:</label>
                                                <input type="password" name="user_password" id="user_password">
                                            </div>
                                            <br />
                                            <br />
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                <br>
                <!--模块样式集合-->
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式1</b></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="block-shadow padding20">
                        <div class="stepper" data-role="stepper" data-steps="5" id="step" data-on-step="onStep">
                            <h2><label>Steps</label></h2>
                        </div>
                        <!--嵌入内容  start-->
                        <div class="padding20 block-shadow _zm-form-horizontal">
                            <br />
                            <div class="row cells5 inputItem">
                                <div class="cell" title="now step">
                                    now step:
                                </div>
                                <div class="cell colspan4">
                                    <div class="input-control text full-size" data-role="input">
                                        <input type="text" id="currentStep" value="1">
                                    </div>
                                </div>
                            </div>
                            <div class="row cells5 inputItem" title="content:">
                                <div class="cell">
                                    content:
                                </div>
                                <div class="cell colspan4">
                                    <div class="input-control text full-size" data-role="input">
                                        <input type="text" id="content" value="step 1">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--嵌入内容  end-->
                        <br />
                        <br />
                        <div class="form-actions">
                            <button type="submit" class="button link" onclick="$('#step').stepper('prior')">Previous</button>
                            <button type="button" class="button primary" onclick="$('#step').stepper('next')">Next</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式2</b></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="block-shadow padding20">
                        <h1 class="text-light">Tab Window</h1>
                        <hr class="thin" />
                        <div class="tabcontrol" data-role="tabcontrol" data-on-tab-click="tab_click" data-on-tab-change="tab_change">
                            <ul class="tabs">
                                <li><a href="#tab1">Tab1</a></li>
                                <li><a href="#tab2">Tab2</a></li>
                                <li><a href="#tab3">Tab3</a></li>
                            </ul>
                            <div class="frames">
                                <div class="frame _zm-whiteBGC" id="tab1">
                                    <form>
                                        <div class="input-control modern text iconic full-size">
                                            <input type="text">
                                            <span class="label">You login</span>
                                            <span class="informer">Please enter you login or email</span>
                                            <span class="placeholder">Input login</span>
                                            <span class="ani-vertical icon mif-user"></span>
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control modern password iconic full-size" data-role="input">
                                            <input type="password">
                                            <span class="label">You password</span>
                                            <span class="informer">Please enter you password</span>
                                            <span class="placeholder">Input password</span>
                                            <span class="ani-bounce icon mif-lock"></span>
                                        </div>
                                    </form>
                                </div>
                                <div class="frame _zm-whiteBGC" id="tab2">
                                    <br>
                                    <br>
                                    <form>
                                        <div class="row cells2">
                                            <div class="cell">
                                                <div class="input-control text full-size" data-role="input">
                                                    <label for="user_login">User email:</label>
                                                    <input type="text" name="user_login" id="user_login">
                                                </div>
                                                <br />
                                                <br />
                                                <div class="input-control password full-size" data-role="input">
                                                    <label for="user_password">User password:</label>
                                                    <input type="password" name="user_password" id="user_password">
                                                </div>
                                                <br />
                                                <br />
                                            </div>
                                            <div class="cell">
                                                <div class="input-control text full-size" data-role="input">
                                                    <label for="user_login">User email:</label>
                                                    <input type="text" name="user_login" id="user_login">
                                                </div>
                                                <br />
                                                <br />
                                                <div class="input-control password full-size" data-role="input">
                                                    <label for="user_password">User password:</label>
                                                    <input type="password" name="user_password" id="user_password">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="frame _zm-whiteBGC" id="tab3">
                                    <br />
                                    <br />
                                    <form>
                                        <div class="input-control text full-size" data-role="input">
                                            <label for="user_login">User email:</label>
                                            <input type="text" name="user_login" id="user_login">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control password full-size" data-role="input">
                                            <label for="user_password">User password:</label>
                                            <input type="password" name="user_password" id="user_password">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control select full-size">
                                            <label>select</label>
                                            <select>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                            </select>
                                        </div>
                                        <br>
                                        <!-- Small radio button -->
                                        <label class="input-control radio small-check">
                                            <input type="radio" name="sex">
                                            <span class="check"></span>
                                            <span class="caption">male</span>
                                        </label>
                                        <label class="input-control radio small-check">
                                            <input type="radio" name="sex">
                                            <span class="check"></span>
                                            <span class="caption">female</span>
                                        </label>
                                        <br>
                                        <!-- Small Checkbox -->
                                        <label class="input-control checkbox small-check">
                                            <input type="checkbox" checked>
                                            <span class="check"></span>
                                            <span class="caption"><a class="_zm-clause" href="#">i agree something clause</a></span>
                                        </label>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <hr class="thin" />
                        <div align="left">
                            <button type="button" class="button link">Cancel</button>
                            <button type="submit" class="button primary">Save</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式3</b></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="block-shadow padding20">
                        <h1 class="text-light">Table Module</h1>
                        <hr class="thin" />
                        <div class="flex-grid">
                            <div class="row cell-auto-size no-margin-bottom">
                                <div class="cell">
                                    <button type="button" class="button primary">button1</button>
                                    <button type="button" class="button primary">button2</button>
                                    <button type="button" class="button primary">button3</button>
                                </div>
                            </div>
                            <hr class="thin" />
                            <div class="row cell-auto-size no-margin-bottom">
                                <div class="cell" align="left">
                                    <label>每页</label>
                                    <div class="input-control select _zm-miniInputWidth_x2">
                                        <select>
                                            <option>10</option>
                                            <option>20</option>
                                            <option>30</option>
                                        </select>
                                    </div>
                                    <label>条</label>
                                </div>
                                <div class="cell" align="right">
                                    <div class="input-control text">
                                        <select>
                                            <option>filter1</option>
                                            <option>filter2</option>
                                            <option>filter3</option>
                                        </select>
                                        <button class="button"><span class="mif-pencil"></span></button>
                                    </div>
                                </div>
                            </div>
                            <div class="row cell-auto-size no-margin-bottom">
                                <table class="table striped hovered cell-hovered border bordered">
                                    <thead>
                                        <tr>
                                            <th class="sortable-column">Column</th>
                                            <th class="sortable-column sort-asc">Column</th>
                                            <th class="sortable-column sort-desc">Column</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                        <tr>
                                            <td>data1</td>
                                            <td>data2</td>
                                            <td>data3</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row cell-auto-size no-margin-bottom">
                                <div class="cell" align="left">
                                    <div class="pagination">
                                        <span class="item">&laquo;</span>
                                        <span class="item ">&lt;</span>
                                        <span class="item current">1</span>
                                        <span class="item ">2</span>
                                        <span class="item ">3</span>
                                        <span class="item ">&gt;</span>
                                        <span class="item">&raquo;</span>
                                    </div>
                                </div>
                                <div class="cell _zm-inputHeight" align="right">
                                    <span>第</span>
                                    <div class="input-control text _zm-miniInputWidth_x1">
                                        <input type="text" value="1" />
                                    </div>
                                    <span>页</span>
                                    <span>，共</span>
                                    <span>10</span>
                                    <span>页</span>
                                </div>
                            </div>
                            <hr class="thin" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式4</b></h2>
                    </div>
                </div>
                <div class="flex-grid">
                    <div class="row block-shadow padding20 cell-auto-size">
                        <div class="cell size-x200">
                            <ul class="sidebar2 block-shadow">
                                <li class="_zm-sidebar2SearchInput" align="center">
                                    <div class="input-control text">
                                        <input type="text" />
                                        <button class="button"><span class="mif-search"></span></button>
                                    </div>
                                </li>
                                <li class="title">Title 1</li>
                                <li class="active"><a href="#"><span class="mif-home icon"></span>Dashboard</a></li>
                                <li class="stick bg-red"><a href="#"><span class="mif-cog icon"></span>Layouts</a></li>
                                <li class="stick bg-green">
                                    <a class="dropdown-toggle" href="#"><span class="mif-tree icon"></span>Sub menu</a>
                                    <ul class="d-menu" data-role="dropdown">
                                        <li><a href=""><span class="mif-vpn-publ icon"></span> Subitem 1</a></li>
                                        <li><a href="">Subitem 2</a></li>
                                        <li><a href="">Subitem 3</a></li>
                                        <li><a href="">Subitem 4</a></li>
                                        <li class="disabled"><a href="">Subitem 5</a></li>
                                    </ul>
                                </li>
                                <li class=""><a href="#">Thread item</a></li>
                                <li class="disabled"><a href="#">Disabled item</a></li>
                                <li class="title">Title 2</li>
                                <li><a href="#">Other Item 1</a></li>
                                <li><a href="#">Other item 2</a></li>
                                <li><a href="#">Other item 3</a></li>
                            </ul>
                        </div>
                        <div class="cell">
                            <h1 class="text-light no-margin-top">Table Module</h1>
                            <hr class="thin" />
                            <div class="flex-grid">
                                <div class="row cell-auto-size no-margin-bottom">
                                    <div class="cell">
                                        <button type="button" class="button primary">button1</button>
                                        <button type="button" class="button primary">button2</button>
                                        <button type="button" class="button primary">button3</button>
                                    </div>
                                </div>
                                <hr class="thin" />
                                <div class="row cell-auto-size no-margin-bottom">
                                    <div class="cell" align="left">
                                        <label>每页</label>
                                        <div class="input-control select _zm-miniInputWidth_x2">
                                            <select>
                                                <option>10</option>
                                                <option>20</option>
                                                <option>30</option>
                                            </select>
                                        </div>
                                        <label>条</label>
                                    </div>
                                    <div class="cell" align="right">
                                        <div class="input-control text">
                                            <select>
                                                <option>filter1</option>
                                                <option>filter2</option>
                                                <option>filter3</option>
                                            </select>
                                            <button class="button"><span class="mif-pencil"></span></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row cell-auto-size no-margin-bottom">
                                    <table class="table striped hovered cell-hovered border bordered">
                                        <thead>
                                            <tr>
                                                <th class="sortable-column">Column</th>
                                                <th class="sortable-column sort-asc">Column</th>
                                                <th class="sortable-column sort-desc">Column</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                            <tr>
                                                <td>data1</td>
                                                <td>data2</td>
                                                <td>data3</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row cell-auto-size no-margin-bottom">
                                    <div class="cell" align="left">
                                        <div class="pagination">
                                            <span class="item">&laquo;</span>
                                            <span class="item ">&lt;</span>
                                            <span class="item current">1</span>
                                            <span class="item ">2</span>
                                            <span class="item ">3</span>
                                            <span class="item ">&gt;</span>
                                            <span class="item">&raquo;</span>
                                        </div>
                                    </div>
                                    <div class="cell _zm-inputHeight" align="right">
                                        <span>第</span>
                                        <div class="input-control text _zm-miniInputWidth_x1">
                                            <input type="text" value="1" />
                                        </div>
                                        <span>页</span>
                                        <span>，共</span>
                                        <span>10</span>
                                        <span>页</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式5</b></h2>
                    </div>
                </div>
                <div class="flex-grid">
                    <div class="row block-shadow padding20 cell-auto-size">
                        <div class="cell size-x200">
                            <ul class="sidebar2 block-shadow">
                                <li class="_zm-sidebar2SearchInput" align="center">
                                    <div class="input-control text">
                                        <input type="text" />
                                        <button class="button"><span class="mif-search"></span></button>
                                    </div>
                                </li>
                                <li class="title">Title 1</li>
                                <li class="active"><a href="#"><span class="mif-home icon"></span>Dashboard</a></li>
                                <li class="stick bg-red"><a href="#"><span class="mif-cog icon"></span>Layouts</a></li>
                                <li class="stick bg-green">
                                    <a class="dropdown-toggle" href="#"><span class="mif-tree icon"></span>Sub menu</a>
                                    <ul class="d-menu" data-role="dropdown">
                                        <li><a href=""><span class="mif-vpn-publ icon"></span> Subitem 1</a></li>
                                        <li><a href="">Subitem 2</a></li>
                                        <li><a href="">Subitem 3</a></li>
                                        <li><a href="">Subitem 4</a></li>
                                        <li class="disabled"><a href="">Subitem 5</a></li>
                                    </ul>
                                </li>
                                <li class=""><a href="#">Thread item</a></li>
                                <li class="disabled"><a href="#">Disabled item</a></li>
                                <li class="title">Title 2</li>
                                <li><a href="#">Other Item 1</a></li>
                                <li><a href="#">Other item 2</a></li>
                                <li><a href="#">Other item 3</a></li>
                            </ul>
                        </div>
                        <div class="cell">
                            <div class="login-form padding20 block-shadow">
                                <form>
                                    <div class="panel">
                                        <div class="heading">
                                            <span class="title">Edit Module</span>
                                        </div>
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control text full-size" data-role="input">
                                        <label for="user_login">User email:</label>
                                        <input type="text" name="user_login" id="user_login">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="input-control password full-size" data-role="input">
                                        <label for="user_password">User password:</label>
                                        <input type="password" name="user_password" id="user_password">
                                    </div>
                                    <br />
                                    <br />
                                    <div class="form-actions">
                                        <button type="submit" class="button primary">Login to...</button>
                                        <button type="button" class="button link">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>模块样式6</b></h2>
                    </div>
                </div>
                <div class="row padding20 block-shadow">
                    <div class="row">
                        <div class="app-bar navy" data-role="appbar">
                            <a class="app-bar-element">
                                <span class="mif-apps mif-2x"></span>
                            </a>
                            <span class="app-bar-divider"></span>
                            <ul class="app-bar-menu small-dropdown">
                                <li><a href="">Home</a></li>
                                <li><a href="">Support</a></li>
                                <li><a href="">Help</a></li>
                                <li><a class="dropdown-toggle" href="#">Sub menu</a>
                                    <ul class="d-menu" data-role="dropdown">
                                        <li><a href="">subitem 1</a></li>
                                        <li><a href="">Subitem 2</a></li>
                                        <li><a href="">Subitem 3</a></li>
                                        <li><a class="dropdown-toggle" href="#">Sub menu</a>
                                            <ul class="d-menu" data-role="dropdown">
                                                <li><a href="">subitem 1</a></li>
                                                <li><a href="">Subitem 2</a></li>
                                                <li><a href="">Subitem 3</a></li>
                                                <li><a href="">Subitem 4</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="app-bar-element place-right">
                                <a class="dropdown-toggle fg-white"><span class="mif-enter"></span> Enter</a>
                                <div class="app-bar-drop-container bg-white fg-dark place-right" data-role="dropdown" data-no-close="true">
                                    <div class="padding20">
                                        <form>
                                            <h4 class="text-light">Login to service...</h4>
                                            <div class="input-control text">
                                                <span class="mif-user prepend-icon"></span>
                                                <input type="text">
                                            </div>
                                            <div class="input-control text">
                                                <span class="mif-lock prepend-icon"></span>
                                                <input type="password">
                                            </div>
                                            <label class="input-control checkbox small-check">
                                                <input type="checkbox">
                                                <span class="check"></span>
                                                <span class="caption">Remember me</span>
                                            </label>
                                            <div class="form-actions">
                                                <button class="button primary">Login</button>
                                                <button class="button link">Cancel</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-grid">
                        <div class="row cell-auto-size">
                            <div class="cell size-x200">
                                <ul class="sidebar2 block-shadow">
                                    <li class="_zm-sidebar2SearchInput" align="center">
                                        <div class="input-control text">
                                            <input type="text" />
                                            <button class="button"><span class="mif-search"></span></button>
                                        </div>
                                    </li>
                                    <li class="title">Title 1</li>
                                    <li class="active"><a href="#"><span class="mif-home icon"></span>Dashboard</a></li>
                                    <li class="stick bg-red"><a href="#"><span class="mif-cog icon"></span>Layouts</a></li>
                                    <li class="stick bg-green">
                                        <a class="dropdown-toggle" href="#"><span class="mif-tree icon"></span>Sub menu</a>
                                        <ul class="d-menu" data-role="dropdown">
                                            <li><a href=""><span class="mif-vpn-publ icon"></span> Subitem 1</a></li>
                                            <li><a href="">Subitem 2</a></li>
                                            <li><a href="">Subitem 3</a></li>
                                            <li><a href="">Subitem 4</a></li>
                                            <li class="disabled"><a href="">Subitem 5</a></li>
                                        </ul>
                                    </li>
                                    <li class=""><a href="#">Thread item</a></li>
                                    <li class="disabled"><a href="#">Disabled item</a></li>
                                    <li class="title">Title 2</li>
                                    <li><a href="#">Other Item 1</a></li>
                                    <li><a href="#">Other item 2</a></li>
                                    <li><a href="#">Other item 3</a></li>
                                </ul>
                            </div>
                            <div class="cell">
                                <div class="login-form padding20 block-shadow">
                                    <form>
                                        <h1>title</h1>
                                        <hr class="thin" />
                                        <br />
                                        <br />
                                        <div class="input-control text full-size" data-role="input">
                                            <label for="user_login">User email:</label>
                                            <input type="text" name="user_login" id="user_login">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control password full-size" data-role="input">
                                            <label for="user_password">User password:</label>
                                            <input type="password" name="user_password" id="user_password">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control password full-size" data-role="input">
                                            <label for="user_password">User password:</label>
                                            <input type="password" name="user_password" id="user_password">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control password full-size" data-role="input">
                                            <label for="user_password">User password:</label>
                                            <input type="password" name="user_password" id="user_password">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="input-control password full-size" data-role="input">
                                            <label for="user_password">User password:</label>
                                            <input type="password" name="user_password" id="user_password">
                                        </div>
                                        <br />
                                        <br />
                                        <div class="form-actions">
                                            <button type="submit" class="button primary">Login to...</button>
                                            <button type="button" class="button link">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <h2 style="color:#2086bf"><b>弹出框样式</b></h2>
                    </div>
                </div>
                <hr class="thin">
                <!--弹出框-->
                <div class="row">
                    <div class="cell">
                        <h2>样式1：纯提示信息</h2>
                        <div>
                            <!--弹出框代码start-->
                            <div data-role="dialog" id="dialog_1" class="padding20 dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" data-overlay-click-close="true" style="min-width: 500px;">
                                <h3>Message</h3>
                                <hr>
                                <p>
                                    提示信息
                                </p>
                            </div>
                            <!--弹出框代码end-->
                            <button class="button primary" onclick="showDialog('#dialog_1')">弹出</button>
                        </div>
                    </div>
                </div>
                <hr class="thin">
                <!--弹出框-->
                <div class="row">
                    <div class="cell">
                        <h2>样式2：带确认按钮 和 取消按钮</h2>
                        <div>
                            <!--弹出框代码start-->
                            <div data-role="dialog" id="dialog_2" class="padding20 dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" data-overlay-click-close="true" style="min-width: 500px;">
                                <h3>Message</h3>
                                <hr class="thin">
                                <p>提示消息</p>
                                <hr class="thin">
                                <div class="row"> 
                                    <div class="cell">
                                        <button class="button primary small-button">确认</button>
                                        <button class="button link small-button">取消</button>
                                    </div>
                                </div>
                            </div>
                            <!--弹出框代码end-->
                            <button class="button primary" onclick="showDialog('#dialog_2')">弹出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
function onStep(index, itemHtml) {
    $("#currentStep").val(index);
    $("#content").val("step" + index);
}

//tab controll function
function tab_click(tab) {
    console.log(tab);
    return true;
}

function tab_change(tab) {
    console.log(tab);
}
//弹出框控制函数
function showDialog(id) {
    var dialog = $(id).data('dialog');
    dialog.open();
}
</script>

</html>